<template>
    <div class="file-popup">
        <popup
            ref="popupRef"
            title="附件管理"
            :async="true"
            width="50vw"
            :clickModalClose="false"
            :footershow="false"
            :showClose="true"
        >
            <mtable
                selection
                :data="data"
                :list="lists"
                tableheight="500"
                :type="typeTable"
                :bill="true"
                @onSelectionchanges="Selectionchanges"
                @handleAdds="handleAdds"
            >
                <template #tool="{ item }">
                    <el-table-column
                        v-if="item.display == 1"
                        :label="item.name"
                        :prop="item.value"
                        :width="item.width"
                    >
                        <template #default="{ row }">
                            <div v-if="item.name == '备注'">
                                <el-input
                                    v-model="row.remark"
                                    size="small"
                                    :disabled="!isEdit"
                                />
                            </div>
                        </template>
                    </el-table-column>
                </template>
            </mtable>
            <div class="buts">
                <material-picker
                    :showbtn="true"
                    v-model="data"
                    :typeshow="true"
                    :img="false"
                    :limit="99"
                    :disabled="!isEdit"
                />
                <el-button
                    type="primary"
                    class="f-left"
                    style="margin-left: 10px"
                    size="small"
                    @click="zipFileFn"
                    :disabled="delIDs.length == 0"
                >
                    下 载
                </el-button>
                <el-button
                    class="f-left"
                    size="small"
                    @click="del"
                    :disabled="!isEdit || delIDs.length == 0"
                >
                    删 除
                </el-button>
                <el-button
                    type="primary"
                    class="f-left"
                    size="small"
                    @click="saveFile"
                >
                    确 定
                </el-button>
                <!-- <el-button class="f-left" size="small" @click="cancel"> 取 消 </el-button> -->
            </div>
        </popup>
        <EdittablePopup
            v-if="showTable"
            ref="editRefs"
            :type="'attachment_management'"
        />
    </div>
</template>

<script setup lang="ts">
import { defineEmits, watch } from "vue";
import Popup from "@/components/popup/index.vue";
import mtable from "@/components/table/index.vue";
import EdittablePopup from "@/components/settable/index.vue";
import feedback from "@/utils/feedback";
import { getCommonFieldDisplay, delFile, zipFile } from "@/api/financial/lists";
// 组件实例
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const props = defineProps(["attachment", "isEdit"]);
const emit = defineEmits(["setFile"]);
// 打开弹窗
const open = () => {
    data.value = JSON.parse(JSON.stringify(props.attachment));
    popupRef.value?.open();
};

const lists = ref([]);
const typeTable = ref("attachment_management");
const getLists = async () => {
    const res = await getCommonFieldDisplay({ type: "attachment_management" });
    lists.value = res;
};
getLists();
const data = ref<any>([]);
const cancel = () => {
    popupRef.value?.close();
    data.value = [];
};
const saveFile = () => {
    emit("setFile", JSON.parse(JSON.stringify(data.value)));
    popupRef.value?.close();
    data.value = [];
};
const delIDs = ref<any>([]);
const Selectionchanges = (val: any) => {
    delIDs.value = [];
    val.forEach((item: any) => {
        delIDs.value.push(item.id);
    });
    console.log(delIDs.value);
};
const del = async () => {
    await feedback.confirm("确定删除？无法恢复");
    await delFile({ id: delIDs.value });
    data.value.forEach((item: any, index: number) => {
        if (delIDs.value.includes(item.id)) {
            data.value.splice(index, 1);
        }
    });
};
const zipFileFn = async () => {
    const res = await zipFile({ id: delIDs.value });
    const a = document.createElement("a");
    a.href = res.url;
    a.click();
};
const showTable = ref(false);
const editRefs = shallowRef<InstanceType<typeof EdittablePopup>>();
const handleAdds = async () => {
    showTable.value = true;
    await nextTick();
    editRefs.value?.open("add");
};
// 方法抛出
defineExpose({
    open,
});
</script>

<style scoped>
.buts {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>
